<script setup lang="ts">
import { useSound } from '@vueuse/sound'
import { sleep } from '@/utils/sleep'
import stepImg10 from '@/assets/common/12/step_02_13_0.jpg'
import stepImg11 from '@/assets/common/12/step_02_14.jpg'

import correctAnswerSfx from '@/assets/sound/correct_answer.mp3'

const { play } = useSound(correctAnswerSfx)
const currentStepImg = ref(stepImg10)

const intro = useIntro({
  steps: [
    {
      element: '#Video1',
      intro: '请将时间线移至素材一结尾',
      position: 'bottom',
    },
  ],
}, [

])

const appStore = useAppStore()

const router = useRouter()
const secendBar1 = [
  {
    label: '分割',
    icon: 'split',
    callBack: () => { },
  },

  {
    label: '变速',
    icon: 'variableSpeed',
    callBack: () => { },
  },
  {
    icon: 'animation',
    label: '动画',
    callBack: () => { },
  },
  {
    label: '抖音玩法',
    icon: 'gameplay',
    callBack: () => { },
  },
  {
    label: '删除',
    icon: 'delete',
    callBack: () => { },
  },

]
const secendBar2 = [
  {
    label: '调节',
    icon: 'adjust',
    callBack() {

    },
  },
  {
    label: '美颜',
    icon: 'beauty',
    callBack: () => { },
  },
  {
    label: '蒙版',
    icon: 'masking_out',
    callBack: () => { },
  },
  {
    icon: 'cut_picture',
    label: '切画中画',
    callBack: () => { },
  },
  {
    label: '防抖',
    icon: 'anti_shake',
    callBack() { },
  },
]
const imgShow = ref(false) // 控制是否展示移动手指
const isUnmounted = ref(false); // 控制是否打断跳转
const isShow = ref(false)

let touchStartX = 0;
let isDragging = false
let dragStartX = 0
let dragStartY = 0
let dragdeltaX = 0
const handleDragStart = (event: MouseEvent) => {

  isDragging = true
  dragStartX = event.clientX
  dragStartY = event.clientY
  console.log(dragStartX);

}

const handleDragMove = (event: MouseEvent) => {


}

const handleDragEnd = (event: MouseEvent) => {

  console.log(event);

  isDragging = false
  dragdeltaX = event.clientX - dragStartX
  console.log(dragdeltaX);
  // 处理拖拽结束的逻辑
  if (dragdeltaX < -30) {
    // 当滑动距离大于30时，触发向左滑动事件
    handleVideo1();
  }
}

const handleTouchStart = (event: TouchEvent) => {

  touchStartX = event.touches[0].clientX;
}

const handleTouchMove = (event: TouchEvent) => {
  // 触摸移动逻辑
  handleDragMove(event.touches[0])
}

const handleTouchEnd = (event: TouchEvent) => {
  const touchEndX = event.changedTouches[0].clientX;
  const deltaX = touchEndX - touchStartX;

  if (deltaX < -30) {
    // 当滑动距离大于30时，触发向左滑动事件
    handleVideo1();
  }
}

const handleMouseDown = (event: MouseEvent) => {
  // 鼠标按下逻辑
  handleDragStart(event)
}

const handleMouseMove = (event: MouseEvent) => {
  // 鼠标移动逻辑
  handleDragMove(event)
}

const handleMouseUp = (event: MouseEvent) => {
  isDragging = false
  dragdeltaX = event.clientX - dragStartX
  console.log(dragdeltaX);
  // 处理拖拽结束的逻辑
  if (dragdeltaX < -30) {
    // 当滑动距离大于30时，触发向左滑动事件
    handleVideo1();
  }
}

const set1 = setTimeout(async () => {
  intro.start()
  await sleep(400)
  imgShow.value = true;
}, 0);

onBeforeUnmount(() => {
  intro.stop()
  isUnmounted.value = true;
  console.log('Mask7_1 组件实例被卸载之前调用')
  clearTimeout(set1)
})
onUnmounted(() => {
  intro.stop()
  isUnmounted.value = true;
  console.log('Mask7_1 组件实例被卸载之前调用')
  clearTimeout(set1)
})

async function handleVideo1() {
  play()
  currentStepImg.value = stepImg11
  intro.stop()
  imgShow.value = false;
  await sleep(1000)
  isShow.value = true;
  await sleep(2000)
  setTimeout(() => {
    isShow.value = false;

    if (!isUnmounted.value) {
      router.push('Mask7_2')
    }
  }, 1000)
}

</script>

<template>
  <div class="flex-1 flex flex-col">
    <div class="no-click ">
      <div v-if="isShow">
        <div class="mask"></div>
        <!-- <div class="isShow"></div> -->
        <img class="isShow" src="../../assets/guide/success_7.png" alt="" srcset="">
      </div>
    </div>
    <div class="flex justify-between h-4em p-x-1em pt-1em ">
      <div>
        <i class="i-material-symbols-close mr-1em" />
        <i class="i-material-symbols-help-outline" />
      </div>

      <div>
        <n-button type="info" size="small" class="mr-1em">
          1080P<i class="i-material-symbols-arrow-drop-down-rounded" />
        </n-button>
        <n-button id="exportBtn" type="primary" size="small">
          导出
        </n-button>
      </div>
    </div>

    <div class="bg-#0A0A0A ">
      <div id="Video1" class=" Video1" draggable="true" @dragstart="handleDragStart" @dragmove.stop="handleDragMove"
        @dragend.stop="handleDragEnd" @touchstart.stop="handleTouchStart" @touchmove.stop="handleTouchMove"
        @touchend.stop="handleTouchEnd" @mousedown.stop="handleMouseDown" @mousemove.stop="handleMouseMove"
        @mouseup.stop="handleMouseUp" />
      <img class="imgShow" v-if="imgShow" src="../../assets/animation/left.gif">
      <img :src="currentStepImg" class="w-full" style="height: 90%;">
    </div>

    <div class="flex h-4em items-center bg-#1C1C1C" style="position: absolute; bottom: 3px;width: 100%;height: ;">
      <div class="bg-#333 h-70% rounded flex-center m-x-0.5em">
        <i class="i-icon-park-outline-left" />
      </div>

      <div class="flex flex-1 overflow-x-auto scrollbar-none  ">
        <div v-for="item in secendBar1" :id="item.icon" :key="item.label" class="flex-col-center flex-1 min-w-16%"
          @click.stop="item.callBack">
          <png-icon :icon="item.icon" class="text-2em m-b-3px" />
          <div class="text-sm">
            {{ item.label }}
          </div>
        </div>
      </div>
    </div>
    <div class="flex h-4em items-center bg-#1C1C1C" style="position: absolute; bottom: 3px;width: 100%;height: ;">
      <div class="bg-#333 h-70% rounded flex-center m-x-0.5em">
        <i class="i-icon-park-outline-left" />
      </div>

      <div class="flex flex-1 overflow-x-auto scrollbar-none  ">
        <div v-for="item in secendBar2" :id="item.icon" :key="item.label" class="flex-col-center flex-1 min-w-16%"
          @click.stop="item.callBack">
          <png-icon :icon="item.icon" class="text-2em m-b-3px" />
          <div class="text-sm">
            {{ item.label }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<style scoped lang="scss">
@media screen and (min-width:440px) {
  .Video1 {
    position: absolute;
    width: 50px;
    height: 120px;
    top: 410px;
    left: 180px;
  }

  .imgShow {
    position: absolute;
    top: 447px;
    left: 48px;
    z-index: 99;
    height: 50px;
  }
  .isShow {
    width: 310px;
    height: 100px;
    position: absolute;
    left: 37px;
    top: 516px;
    z-index: 999;
    // background: url("../../assets/guide/success_7.png") no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
    // font-family: title, sans-serif;
    // font-size: 24px;
  }
  .mask {
    position: absolute;
    top: 395px;
    left: 170px;
    z-index: 99;
    height: 152px;
    width: 56px;
    box-shadow: 0 0 0px 100vh  rgba(0,0,0,0.5);
  }
}

@media screen and (max-width:440px) {
  .Video1 {
    position: absolute;
    width: 10vw;
    height: 25vw;
    top: 106vw;
    left: 45vw;
  }

  .imgShow {
    position: fixed;
    top: 113vw;
    left: 14vw;
    z-index: 99;
    height: 50px;
  }
  .isShow {
    width: 310px;
    height: 100px;
    position: absolute;
    left: 12vw;
    top: 128vw;
    z-index: 999;
    // background: url("../../assets/guide/success_7.png") no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
    // font-family: title, sans-serif;
    // font-size: 24px;
  }
  .mask {
    position: fixed;
    top: 99vw;
    left: 42vw;
    z-index: 99;
    height: 36vw;
    width: 15vw;
    box-shadow: 0 0 0px 100vh  rgba(0,0,0,0.5);
  }
}
@media screen and (max-width:390px) {
  .Video1 {
    position: absolute;
    width: 10vw;
    height: 25vw;
    top: 106vw;
    left: 45vw;
  }

  .imgShow {
    position: fixed;
    top: 113vw;
    left: 11vw;
    z-index: 99;
    height: 50px;
  }
  .isShow {
    width: 310px;
    height: 100px;
    position: absolute;
    left: 7vw;
    top: 129vw;
    z-index: 999;
    // background: url("../../assets/guide/success_7.png") no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
    // font-family: title, sans-serif;
    // font-size: 24px;
  }
  .mask {
    position: fixed;
    top: 99vw;
    left: 42vw;
    z-index: 99;
    height: 36vw;
    width: 15vw;
    box-shadow: 0 0 0px 100vh  rgba(0,0,0,0.5);
  }
}
@media screen and (max-width:340px) {
  .Video1 {
    position: absolute;
    width: 10vw;
    height: 25vw;
    top: 106vw;
    left: 45vw;
  }

  .imgShow {
    position: fixed;
    top: 113vw;
    left: 11vw;
    z-index: 99;
    height: 50px;
  }
  .isShow {
    width: 310px;
    height: 100px;
    position: absolute;
    left: 2vw;
    top: 129vw;
    z-index: 999;
    // background: url("../../assets/guide/success_7.png") no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
    // font-family: title, sans-serif;
    // font-size: 24px;
  }
  .mask {
    position: fixed;
    top: 99vw;
    left: 42vw;
    z-index: 99;
    height: 36vw;
    width: 15vw;
    box-shadow: 0 0 0px 100vh  rgba(0,0,0,0.5);
  }
}

.no-click {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: transparent;
  z-index: 99;
}
</style>